/**
 *  created by lllwx
 *  date: 2021/10/8
 *  time: 5:01 下午
 *  version: 1.0
 *  desc:
 */
import {
  watch,
  defineComponent, PropType, toRefs, ref, unref,
} from 'vue';
import { Table } from 'ant-design-vue';
import KtPaging from '../KtPaging/index.vue';
import { IBasicTableOptions } from '@/vca/useTable';

const KtTable = defineComponent({
  name: 'KtTable',
  inheritAttrs: false,
  props: {
    schemas: {
      type: Array as PropType<KtTable.ITableSchema[]>,
      required: true,
    },
    tableProps: {
      type: Object as PropType<IBasicTableOptions>,
      required: true,
    },
    pageLimit: {
      type: Object as PropType<Kt.IPageLimit>,
      required: false,
      default: () => {},
    },
  },
  setup(props, { attrs }) {
    const { pageLimit, schemas, tableProps } = toRefs(props);

    const tableSchemas = ref<KtTable.ITableSchema[]>([]);
    watch(() => schemas.value, (value) => {
      tableSchemas.value = value.map((item) => ({
        ...item,
        title: unref(item.title),
      }));
    }, { deep: true, immediate: true });

    const onPaging = {
      'onUpdate:pageNo': (page: number) => {
        pageLimit.value.pageNo = page;
      },
      'onUpdate:pageSize': (limit: number) => { 
        pageLimit.value.pageSize = limit; 
      },
    };

    function getPage() {      
      // @ts-ignore
      return <KtPaging  { ...tableProps.value} { ...pageLimit.value } {...onPaging} />;
    }

    return () => <div>
      {/* @ts-ignore */}
      <Table { ...tableProps.value } {...attrs} columns={tableSchemas.value} pagination={false} />
      {tableProps.value.pagination && getPage()}
    </div>;
  },
});

export default KtTable;
